<template>
  <div class="costume-detail">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/costumes' }">服装列表</el-breadcrumb-item>
        <el-breadcrumb-item>服装详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 主要内容 -->
    <div v-if="costumeStore.loading" class="loading-container">
      <el-skeleton :rows="10" animated />
    </div>

    <div v-else-if="costumeStore.currentCostume" class="detail-content">
      <el-card shadow="never">
        <el-row :gutter="40">
          <!-- 图片区域 -->
          <el-col :xs="24" :sm="12" :md="12" :lg="10">
            <div class="image-section">
              <el-image
                  :src="costumeStore.currentCostume.imageUrl"
                  :alt="costumeStore.currentCostume.name"
                  fit="contain"
                  class="main-image"
                  :preview-src-list="[costumeStore.currentCostume.imageUrl]"
              >
                <template #error>
                  <div class="image-error">
                    <el-icon><Picture /></el-icon>
                    <span>图片加载失败</span>
                  </div>
                </template>
                <template #placeholder>
                  <div class="image-loading">
                    <el-icon><Loading /></el-icon>
                  </div>
                </template>
              </el-image>
            </div>
          </el-col>

          <!-- 信息区域 -->
          <el-col :xs="24" :sm="12" :md="12" :lg="14">
            <div class="info-section">
              <h1 class="costume-name">{{ costumeStore.currentCostume.name }}</h1>

              <div class="price-section">
                <span class="price">¥{{ costumeStore.currentCostume.rentalPrice }}</span>
                <span class="price-unit">/天</span>
                <el-tag
                    :type="costumeStore.currentCostume.status === 1 ? 'success' : 'danger'"
                    class="status-tag"
                >
                  {{ costumeStore.currentCostume.status === 1 ? '可租' : '已租出' }}
                </el-tag>
              </div>

              <el-divider />

              <!-- 基本信息 -->
              <div class="basic-info">
                <el-descriptions :column="1" border>
                  <el-descriptions-item label="服装分类">
                    <el-tag type="primary">{{ costumeStore.currentCostume.category }}</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="品牌">
                    {{ costumeStore.currentCostume.brand || '暂无品牌信息' }}
                  </el-descriptions-item>
                  <el-descriptions-item label="尺寸">
                    {{ costumeStore.currentCostume.size }}
                  </el-descriptions-item>
                  <el-descriptions-item label="颜色">
                    {{ costumeStore.currentCostume.color }}
                  </el-descriptions-item>
                  <el-descriptions-item label="上架时间">
                    {{ formatDate(costumeStore.currentCostume.createdAt) }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>

              <!-- 描述 -->
              <div class="description-section">
                <h3>服装描述</h3>
                <div class="description-content">
                  {{ costumeStore.currentCostume.description || '暂无详细描述' }}
                </div>
              </div>

              <!-- 操作按钮 -->
              <div class="action-section">
                <el-button
                    type="primary"
                    size="large"
                    :disabled="costumeStore.currentCostume.status !== 1"
                    @click="handleRent"
                >
                  <el-icon><ShoppingCart /></el-icon>
                  立即租赁
                </el-button>
                <el-button
                    size="large"
                    :icon="Star"
                    @click="handleAddFavorite"
                >
                  加入收藏
                </el-button>
                <el-button
                    size="large"
                    :icon="Share"
                    @click="handleShare"
                >
                  分享
                </el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 空状态 -->
    <div v-else class="empty-container">
      <el-empty description="服装信息不存在">
        <el-button type="primary" @click="$router.push('/costumes')">
          返回服装列表
        </el-button>
      </el-empty>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useCostumeStore } from '@/pinia/costumeStore'
import { useUserStore } from '@/pinia/userStore'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Picture, Loading, ShoppingCart, Star, Share } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const costumeStore = useCostumeStore()
const userStore = useUserStore()

// 生命周期
onMounted(() => {
  loadCostumeDetail()
})

onUnmounted(() => {
  costumeStore.resetCurrentCostume()
})

// 方法
const loadCostumeDetail = async () => {
  const costumeId = parseInt(route.params.id)

  if (!costumeId || costumeId < 1) {
    router.push('/not-found')
    return
  }

  try {
    await costumeStore.fetchCostumeById(costumeId)
  } catch (error) {
    console.error('加载服装详情失败:', error)
    ElMessage.error('加载服装详情失败')
    router.push('/costumes')
  }
}

const formatDate = (dateString) => {
  if (!dateString) return '未知'
  return new Date(dateString).toLocaleDateString('zh-CN')
}

const handleRent = () => {
  if (!userStore.isLoggedIn) {
    ElMessageBox.confirm('您需要登录后才能租赁服装，是否立即登录？', '提示', {
      confirmButtonText: '去登录',
      cancelButtonText: '再逛逛',
      type: 'warning'
    }).then(() => {
      router.push('/login')
    })
    return
  }

  // 这里可以跳转到租赁页面或打开租赁对话框
  ElMessage.success('开始租赁流程')
}

const handleAddFavorite = () => {
  if (!userStore.isLoggedIn) {
    ElMessage.warning('请先登录后再收藏')
    return
  }
  ElMessage.success('已加入收藏')
}

const handleShare = () => {
  if (navigator.share) {
    navigator.share({
      title: costumeStore.currentCostume.name,
      text: costumeStore.currentCostume.description,
      url: window.location.href
    })
  } else {
    // 备用分享方案
    navigator.clipboard.writeText(window.location.href)
    ElMessage.success('链接已复制到剪贴板')
  }
}
</script>

<style scoped>
.costume-detail {
  min-height: calc(100vh - 120px);
  background: #f5f7fa;
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.detail-content {
  max-width: 1200px;
  margin: 0 auto;
}

.image-section {
  text-align: center;
}

.main-image {
  width: 100%;
  max-height: 500px;
  border-radius: 8px;
  background: #fff;
}

.image-error,
.image-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #999;
  background: #f5f7fa;
  border-radius: 8px;
}

.info-section {
  padding: 0 20px;
}

.costume-name {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #303133;
  line-height: 1.3;
}

.price-section {
  display: flex;
  align-items: center;
  margin: 20px 0;
  gap: 10px;
}

.price {
  font-size: 32px;
  font-weight: bold;
  color: #e6a23c;
}

.price-unit {
  font-size: 16px;
  color: #909399;
}

.status-tag {
  margin-left: 10px;
}

.basic-info {
  margin: 25px 0;
}

.description-section {
  margin: 30px 0;
}

.description-section h3 {
  margin-bottom: 15px;
  color: #303133;
  font-size: 18px;
}

.description-content {
  line-height: 1.8;
  color: #606266;
  background: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  border-left: 4px solid #409eff;
}

.action-section {
  margin-top: 40px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.action-section .el-button {
  min-width: 120px;
}

.loading-container {
  padding: 100px 0;
  max-width: 1200px;
  margin: 0 auto;
}

.empty-container {
  padding: 100px 0;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .costume-detail {
    padding: 10px;
  }

  .info-section {
    padding: 0 10px;
  }

  .costume-name {
    font-size: 22px;
  }

  .price {
    font-size: 28px;
  }

  .action-section {
    flex-direction: column;
  }

  .action-section .el-button {
    width: 100%;
  }
}
</style>